/*create by jiangjt on */
/*这个组件用于*/
<template>
  <div>
    <mu-row gutter>
      <mu-col width="100" tablet="50" desktop="33">
        <mu-drawer :open="!isNavHide" :docked="!isMin" @close="handleNavHide">
          <mu-appbar title="bingo-ui">
          </mu-appbar>
          <mu-list>
            <mu-list-item title="测试跳转" to="/home/hello">
            </mu-list-item>
            <mu-list-item title="用户管理" toggleNested>
              <mu-list-item slot="nested" title="添加用户">
              </mu-list-item>
              <mu-list-item slot="nested" title="用户列表">
              </mu-list-item>
            </mu-list-item>
            <mu-list-item title="文章管理" toggleNested>
              <mu-list-item slot="nested" title="添加文章">
              </mu-list-item>
              <mu-list-item slot="nested" title="文章列表">
              </mu-list-item>
            </mu-list-item>
            <mu-list-item title="角色管理" toggleNested>
              <mu-list-item slot="nested" title="添加角色">
              </mu-list-item>
              <mu-list-item slot="nested" title="角色列表">
              </mu-list-item>
            </mu-list-item>
          </mu-list>
        </mu-drawer>
      </mu-col>
      <mu-col width="100" tablet="50" desktop="33">
      <mu-appbar title="bingo-ui" class="home-layout-right" :class="{'home-nav-hide':isNavHide,'home-layout-min':isMin}" :style="{width:layoutRigthWidth}">
        <mu-icon-button icon="menu" @click="handleNavHide" slot="left"/>
        <mu-icon-button icon="expand_more" slot="right"/>
      </mu-appbar>
      <div class="home-layout-right home-layout-content" :class="{'home-nav-hide':isNavHide,'home-layout-min':isMin}"
           :style="{width:layoutRigthWidth,height:layoutContentHeight}">
        <router-view></router-view>
      </div>
      </mu-col>
    </mu-row>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        isNavHide: false,
        layoutRigthWidth: '0px',
        layoutContentHeight: '0px',
        isMin:false
      }
    },
    methods: {
      handleNavHide(){
        this.isNavHide = !this.isNavHide
        this.resetAppBarAndContent()
      },
      resetAppBarAndContent(){//重置组件信息
        if(!this.isMin){//大屏模式下
          if (this.isNavHide)
            this.layoutRigthWidth = window.innerWidth + 'px'
          else
            this.layoutRigthWidth = (window.innerWidth - 256) + 'px'
        }else{//小屏模式下
          this.layoutRigthWidth = window.innerWidth + 'px'
        }
        this.layoutContentHeight = (window.innerHeight - 64) + 'px'
      }
    },
    created(){
      if(window.innerWidth < 990){//小屏模式创建
        this.isMin=true
        this.isNavHide=true
      }else{
        this.isMin=false
        this.isNavHide=false
      }
      this.resetAppBarAndContent()

      window.onresize = () => {
        if(window.innerWidth < 990)
            this.isMin=true
        else
            this.isMin=false
        this.resetAppBarAndContent()
        if (this.isMin && !this.isNavHide)
          this.handleNavHide()
        else if (!this.isMin && this.isNavHide)
          this.handleNavHide()
      }
    }
  }
</script>

<style>
  .home-layout-right {
    position: fixed;
    left: 256px;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23, 1, .32, 1);
    transition: all .45s cubic-bezier(.23, 1, .32, 1)
  }

  .home-layout-min{
    left: 0px;
  }

  .home-layout-content{
    top:64px
  }

  .home-nav-hide {
    left: 0px;
  }


</style>
